<template>
  	<div class="section-page">
	    <!-- <h3 class="section-title" style="text-decoration: none;">出入库</h3> -->
	    <!-- <el-button-group class="button-group mt10">
	      	<el-button type="default" :class="billType === 'NORMAL' ? 'btn-c-primary' : 'btn-c-default'" @click="billTypeChange('NORMAL')">设备库</el-button>
	      	<el-button type="default" :class="billType === 'SYSTEM' ? 'btn-c-primary' : 'btn-c-default'" @click="billTypeChange('SYSTEM')">系统库</el-button>
	    </el-button-group> -->
		<div class="btn-wrap">
			<div class="item">
				<h3 class="section-title" style="text-decoration: none;">设备库</h3>
			</div>
			<div class="item">
				<h3 class="section-title" style="text-decoration: none;flex: 1;">系统库</h3>
				<el-button type="default" class="btn-c-primary" :disabled="!selectSysList"  @click="systemSet">系统配套表</el-button>
			</div>
		</div>
	    <div class="tab-wrap" style="padding: 0">
	      	<warehouse-table v-if="modelId" @saveRow="saveRow" :modelId="modelId" :bill-type="billType" :list="tableData" :lists="stytemData" @currentChange="currentChange"></warehouse-table>
	      	<div style="padding: 10px;text-align: center;display:flex">
				<div class="page-wrap" style="width: 56%;">
					<el-pagination
					background
					layout="total, sizes, prev, pager, next, jumper"
					:page-size="pageOption.pageSize"
					:total="pageOption.total"
					:page-sizes="pageOption.sizes"
					@size-change="sizeCurrentChange"
					@current-change="pageCurrentChange"
					>
					</el-pagination>
				</div>
		       <div class="page-wrap" style="width: 44%;">
					<el-pagination
						background
						layout="total, sizes, prev, pager, next, jumper"
						:page-size="pageOptions.pageSize"
						:total="pageOptions.total"
						:page-sizes="pageOptions.sizes"
						@size-change="sizeCurrentChanges"
						@current-change="pageCurrentChanges"
					>
					</el-pagination>
			   </div>
	      	</div>
	    </div>
		<el-dialog class="modify-class" width="1000px" :visible.sync="systemDilog" title="系统设置"  :before-close="beforeClose">
			<div class="trnas-wrap">
				<div class="left">
					<div class="search-wrap">
						 <el-input
						 	class="search-inp"
							placeholder="请输入关键字"
							prefix-icon="el-icon-search"
							v-model="pageDecice.keyWords">
						</el-input>
						<el-button class="search-btn" type="primary" size="mini" icon="el-icon-search" @click="pageDeciceCurrentChanges(1)">搜索</el-button>
					</div>
					<el-table
						:row-key="getRowKeys"
						ref="multipleTable"
						:data="selectDeviceData"
						tooltip-effect="dark"
						style="width: 100%"
						@selection-change="handleSelectionChange">
						<el-table-column
							type="selection"
							:reserve-selection="true"
							width="55">
						</el-table-column>
						<el-table-column
							prop="deviceCode"
							label="设备代号"
							>
						</el-table-column>
						<el-table-column
							prop="deviceName"
							label="设备名称"
							>
						</el-table-column>
					</el-table>
					<!-- <div class="page-wrap-dev">
						<el-pagination
							background
							layout="total, sizes, prev, pager, next, jumper"
							:page-size="pageDecice.pageSize"
							:total="pageDecice.total"
							:page-sizes="pageDecice.sizes"
							@size-change="sizeDeciceCurrentChanges"
							@current-change="pageDeciceCurrentChanges"
						>
						</el-pagination>
					</div> -->
				</div>
				<div class="left right">
					<div class="head">
						<span>设备代号</span>  <span>设备名称</span> <span>数量</span> 
					</div>
					<div class="body">
						<div class="select" v-for="(item,index) in hadSelect" :key="index">
							<span>{{item.deviceCode}}</span>
							<span>{{item.deviceName}}</span>
							<el-input class="input" type="number" v-model="item.deviceNum" placeholder="数量"></el-input>
							<!-- <span class="delete"><i class="el-icon-close icon-del" ></i></span> -->
						</div>
					</div>
					<div class="no-data" v-if="!hadSelect.length">
						暂无数据
					</div>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button class="btn-comfirm" type="primary" @click="deviceSubmit">确认</el-button>
      			<el-button class="btn-cancel" @click="systemDilog = false">取消</el-button>
			</div>
  		</el-dialog>
  	</div>
</template>

<script>
import warehouseApi from '@/apis/overview/warehouse.js'
import WarehouseTable from './WarehouseTable'
export default {
  	components: { WarehouseTable},
  	props: ['id'],
  	data() {
	    return {
			selectDeviceData:[],
			value: [],
			filterMethod(query, item) {
			return item.pinyin.indexOf(query) > -1;
			},
	      	pageOption: {
		        page: 1,
		        pageSize: 10,
		        total: 1,
		        sizes: [5, 10, 20, 30, 40, 50, 100]
	      	},
			pageOptions: {
		        page: 1,
		        pageSize: 10,
		        total: 1,
		        sizes: [5, 10, 20, 30, 40, 50, 100]
	      	},
			pageDecice: {
		        page: 1,
		        pageSize: 1000,
		        total: 1,
		        sizes: [5, 10, 20, 30, 40, 50, 100],
				keyWords:'',
	      	},
			systemDilog: false,
	      	billType: 'NORMAL', // NORMAL: 设备库, SYSTEM: 系统库
	      	tableData: [],
			stytemData:[],
	      	normalData: [{
        		code: 'AAA',
        		name: '计算机',
        		designUnits: '万源',
        		hisSetOfUnits: '万源',
        		hisSetOfUnits: '万源',
        		situation: '9/10',
        		serial: '万源',
        		status: '未出库',
        		storageTime: '2021年01月09日17:59:27',
        		warehousePeople: 'admin',
        		deliveryTime: '',
        		deliveryMan: '',
        		where: '第一套（系统库-系统编号）'
        	}],
        	// systemData: [{
        	// 	code: 'AAA',
        	// 	name: '计算机',
        	// 	serial: '',
        	// 	detail: '',
        	// 	status: '试验中',
        	// 	position: '',
        	// 	warehousePeople: '',
        	// 	storageTime: '',
        	// 	deliveryMan: '',
        	// 	deliveryTime: '',
        	// 	remark: ''
        	// }],
			checkAll: false,
			checkedCities: [],
			cities:  [{code:1,name:'琦琦'},{code:2,name:'琦琦'},{code:3,name:'琦琦'},{code:4,name:'琦琦'}],
			isIndeterminate: true,
			hadSelect:[],
			selectCode:[],
			selectSysList:null,
			modelId: ''
	    }
  	},
  	methods: {
		handleSelectionChange(val) {
			this.hadSelect = val;
		},
		// 系统设置
		systemSet() {
			this.systemDilog = true;
			this.requestSystemListShowData();
		},
	  	// 切换表格
	    billTypeChange(type) {
	      	this.billType = type
	      	this.pageOption.page = 1
	      	this.tableData = []
	      	this.requestListData()
	    },
	    // 分页操作
	    sizeCurrentChange(size) {
	      	this.pageOption.pageSize = size
	      	this.requestListData()
	    },
	    pageCurrentChange(page) {
	      	this.pageOption.page = page
	      	this.requestListData()
	    },
		   // 分页操作
	    sizeCurrentChanges(size) {
	      	this.pageOptions.pageSize = size
	      	this.requestSystemListData()
	    },
	    pageCurrentChanges(page) {
	      	this.pageOptions.page = page
	      	this.requestSystemListData()
	    },
		sizeDeciceCurrentChanges(size) {
	      	this.pageDecice.pageSize = size
	      	this.selectDeviceList()
	    },
	    pageDeciceCurrentChanges(page) {
	      	this.pageDecice.page = page
	      	this.selectDeviceList()
	    },
		getRowKeys(row) {
 			return row.deviceCode; // id为列表数据的唯一标识
		},
		currentChange(row) {
			this.selectSysList = row
		},
		//系统验收保存
	  	saveRow(row) {
			let model = {}
			model.sysNo = row.sysNo
			model.position = row.position
			model.remark = row.remark
			model.modelId = row.modelId
			model.id = row.id
		warehouseApi.editSysList(model).then(({ data }) => {
			this.$notify({
				title: '成功',
				message: '保存成功',
				type: 'success'
			});
			this.pageCurrentChanges(1)
		})
	  },
		//系统设置提交
		deviceSubmit() {
			this.hadSelect.forEach((item)=> {
				if(item.deviceNum <=0  || item.deviceNum === undefined){
					this.$notify({
						title: '警告',
						message: '请填写正确的数量',
						type: 'warning'
					});
					throw Error('请填写正确的数量');
				}
			})
			warehouseApi.saveDevice(this.hadSelect,this.selectSysList.matchSysId).then(({ data }) => {
	          	this.systemDilog = false
				this.$refs.multipleTable.clearSelection()
				this.hadSelect = []
				this.$notify({
					title: '成功',
					message: '设置成功',
					type: 'success'
				});
	        })
		},
	    // 请求表格数据
	    requestListData() {
			this.modelId = Number(this.id);
	      	const {page, pageSize} = this.pageOption
	      	warehouseApi.warehouseList({
		        modelId: this.id,
		        pageNum: page,
		        pageSize
		    }).then(({ data }) => {
	          	const {list, total} = data;
	          	this.tableData = list;
				this.tableData = list.map((item) => {
					return {
						...item,
						Warehousing: item.instockCount + '/' + item.deviceTotalCount,
					};
				});
	          	this.pageOption.total = total;
	        })
	    },
		// 系统设备
	    requestSystemListData() {
	      	const {page, pageSize} = this.pageOptions
	      	warehouseApi.warehouseSystemList({
		        modelId: this.id,
		        pageNum: page,
		        pageSize
		    }).then(({ data }) => {
	          	const {list, total} = data;
	          	// this.stytemData = list;
	          	this.pageOptions.total = total;
				this.stytemData = list.map((item) => {
					let status = '';
					if(item.status === 'SYZ'){
						status = '试验中'
					}else if(item.status === 'WCSY'){
						status = '完成试验'
					}else if(item.status === 'WCYS'){
						status = '完成验收'
					}else if(item.status === 'WCJF'){
						status = '完成交付)'
					}
					return {
						...item,
						edit: false,
						status:status,
						inOptTime: this.format(item.inOptTime),
						outOptTime: item.outOptTime ? this.format(item.outOptTime) : ''

					};
				});
				this.selectSysList = this.stytemData[0]
	        })
	    },
		add0(m){return m<10?'0'+m:m },
		format(shijianchuo){
			//shijianchuo是整数，否则要parseInt转换
			var time = new Date(shijianchuo);
			var y = time.getFullYear();
			var m = time.getMonth()+1;
			var d = time.getDate();
			var h = time.getHours();
			var mm = time.getMinutes();
			var s = time.getSeconds();
			return y+'-'+this.add0(m)+'-'+this.add0(d)+' '+this.add0(h)+':'+this.add0(mm)+':'+this.add0(s);
		},
		selectDeviceList() {
			const {page, pageSize, keyWords} = this.pageDecice
	      	warehouseApi.selectDevice({
		        modelId: this.id,
		        pageNum: page,
				keyWords,
		        pageSize
		    }).then(({ data }) => {
	          	const {list, total} = data;
	          	this.selectDeviceData = list;
	          	this.pageDecice.total = total;
	        })
		},
		// 回显系统设备
	    requestSystemListShowData() {
	      	warehouseApi.showDevice({
		        matchSysId: this.selectSysList.matchSysId,
		    }).then(({ data }) => {
	          	this.hadSelect = data;
	        })
	    },
		beforeClose() {
			this.systemDilog = false
		}
  	},
  	mounted() {
    	this.requestListData()
		this.requestSystemListData()
		this.selectDeviceList()
  	}
}
</script>

<style lang="scss">
.btn-wrap{
	display: flex;
	justify-content: space-between;
	.item {
		width: 48%;
		height: 61px;
		background-color: #F4F5F8;
		display: flex;
		align-items: center;
		border: 1px solid #D0D6E3;
		padding: 0 12px 0 25px;
	}
}
.page-wrap{
	width:50%;
	display: flex;
	justify-content: space-around;
}
.trnas-wrap{
	width: 100%;
	display: flex;
	background:#fff;
	margin-top: 30px;
	justify-content: space-between;
	.left{
		width:45%;
		border-right: 1px solid #F5F7FA;
		.head{
			background:#F5F7FA;
			padding:15px;
			span{
				display:inline-block ;
				min-width:125px;
				max-width:80px;
				font-weight:bold;
				color:#888;
			}
		}
		.body{
			border-left: 1px solid #F5F7FA;
			span{
				display:inline-block ;
				min-width:125px;
				max-width:80px;
			}
			.input{
				width:80px;
				.el-input__inner{
					font-size:14px !important;
					border-bottom:1px solid #c9c9c9;
				}
			}
			.delete{
				text-align: right;
				padding-right:20px;
			}
			.icon-del{
				background:#ff6666;
				color:#fff;
				border-radius:50%;
				padding:2px;
				cursor: pointer;
			}
			.select{
				padding: 4px 15px;
				border-bottom:1px solid #EBEEF5;
			}
		}
		.check-box{
			width:100%;
			margin-top:20px;
			display: block;
		}
	}
	.right{
		width:45%;
		margin-top: 38px;
	}
}
.trnas-wrap .el-table th > .cell{
	padding-left:14px;
}
.trnas-wrap .el-table th{
	background:#F5F7FA;
}
.page-wrap-dev{
	margin-top:20px;
}
.no-data{
	color:#999;
	padding:10px;
	padding-left:161px;
}
.search-wrap{
	display: flex;
	height:40px;
	.search-inp{
		width:100%;
		input{
			border-radius:0;
			border: 1px solid #F5F7FA;
		}
	}
	.search-btn{
		border-radius: 0;
	}
}
</style>
